<template>
    <div id="panel">
        <div>
            <button id="btn_w">W (前)</button> <br>
            <button id="btn_a">A (↺)</button>  <button id="btn_d">D (↻)</button> <br>
            <button id="btn_s">S (后)</button>
        </div>
        <div style="position: relative;">
            <button id="btn_u">U (上浮)</button><br>
            <button id="btn_h">H (⇇)</button> <button id="btn_k">K (⇉)</button><br>
            <button id="btn_n">N (下潜)</button><br>
            <button id="btn_space" class="abs-pos">space (停车)</button>
        </div>

    </div>
    <div id="gaigai">
        <ol>
            <li v-for="content in cmdLists" class="cmd_styl">{{content.substring(0,4)}}[{{content.substring(4)}}]</li>
        </ol>

    </div>
</template>

<script setup>
    import {ref,reactive,computed,onMounted,inject,nextTick,onActivated,onDeactivated} from 'vue'
    import Mousetrap from 'mousetrap' //处理快捷键的库


    const cmdLists = reactive([])
    const g_ws2 = inject('g_ws2')

    onMounted(()=>{
        Mousetrap.bind(['w','a','s','d','u','n','space','h','k'],process_keys)
    })
    onActivated(()=>{
        Mousetrap.bind(['w','a','s','d','u','n','space','h','k'],process_keys)
    })
    onDeactivated(()=>{
        Mousetrap.unbind(['w','a','s','d','u','n','space','h','k'])
    })

    function send_turn_mid_cmd(){
        const data= [0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/0x3,0xe8,
                         0x3,0xe8,/*第5-6字节 值为1000 回正指令*/  0x3,0xe8, 0x48/*校验和为0x548 取低字节*/]
        const cmdData = new Uint8Array(data)//Buffer.from(data)
        if(g_ws2.conn && g_ws2.conn.readyState==1){
            g_ws2.conn.send(cmdData)
            //console.log('发送了转弯回正的命令',Date())
        }
        turn_mid_timer = null
    }
    let turn_mid_timer = null  //有左转或右转指令时，要事后发个回中间的指令
    function process_keys(e,combo){
        //console.log(combo,typeof combo)

        const btn = document.getElementById(`btn_${combo}`)
        const btn_color = getComputedStyle(document.getElementById('panel') ).getPropertyValue('--btn-color')
        if(btn_color){
            btn.style.backgroundColor = btn_color       //浅色模式闪色
            //console.log('qian color闪烁这样',btn_color)
        }else{
            btn.style.backgroundColor="rgb(74,84,243)"   //深色模式闪色
        }

        setTimeout(()=>{
            btn.style.backgroundColor = ''
        },110)

        if(g_ws2.conn && g_ws2.conn.readyState==1){
            let data = ''
            let ty = null
            switch(combo){
                case 'a':
                  ty='左转 -'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/ 0x3,0xe8,
                        0x1,0xb0,/*第5-6字节 值为432*/  0x3,0xe8, 0x0e/*校验和为0x50e 取低字节*/]
                  if(turn_mid_timer){
                      clearTimeout(turn_mid_timer)
                  }
                  turn_mid_timer = setTimeout(send_turn_mid_cmd,600)
                  break;
                case 'w':
                  ty='向前 -'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/0x5,0xb0,/*第3-4字节 值为1456*/
                        0x3,0xe8,   0x3,0xe8, 0x12/*校验和为0x512 取低字节*/]
                  break;
                case 's':
                  ty='向后 -'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/0x1,0xb0,/*第3-4字节 值为432*/
                        0x3,0xe8,   0x3,0xe8, 0x0e/*校验和为0x50e 取低字节*/]
                  break;
                case 'd':
                  ty='右转 -'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/0x3,0xe8,
                         0x5,0xb0,/*第5-6字节 值为1456*/  0x3,0xe8, 0x12/*校验和为0x512 取低字节*/]
                  if(turn_mid_timer){
                      clearTimeout(turn_mid_timer)
                  }
                  turn_mid_timer = setTimeout(send_turn_mid_cmd,600)
                  break
                case 'u':
                  ty='上浮 -'
                  data=[0xaa,0xaa,0x41,8, 0,0,0,1,/*模拟雷神手柄的Y键 but[3]位置*/
                          0,0,0,0, 0x9e /*校验和为0x19e 取低字节*/]
                  break
                case 'n':
                  ty='下潜 -'
                  data=[0xaa,0xaa,0x41,8, 1,0,0,0,/*模拟雷神手柄的A键 but[0]位置*/
                          0,0,0,0, 0x9e /*校验和为0x19e 取低字节*/]
                  break;
                case 'space':
                  ty='停止 -'
                  data=[0xaa,0xaa,0x41,8, 0,0,0,0,/*模拟雷神手柄的L1键 but[4]位置*/
                          1,0,0,0, 0x9e /*校验和为0x19e 取低字节*/]
                  break
                case 'h':
                  ty='左平移-'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/ 0x3,0xe8,
                        0x3,0xe8,    0x1,0xb0,/*第7-8字节 值为432*/  0x0e/*校验和为0x50e 取低字节*/]
                  break
                case 'k':
                  ty='右平移-'
                  data=[0xaa,0xaa,0x40,8,  0x3,0xe8,/*第1-2字节 值为1000*/ 0x3,0xe8,
                        0x3,0xe8,    0x5,0xb0,/*第7-8字节 值为1456*/  0x12/*校验和为0x512 取低字节*/]
                  break
            }
            const cmdData = new Uint8Array(data)//Buffer.from(data)
            g_ws2.conn.send(cmdData)
            //g_ws2.conn.send('\x00')
            cmdLists.push(ty + data.toString())
            nextTick(()=>{
                const div = document.getElementById('gaigai')
                div.scrollTop = div.scrollHeight
            })
        }
    }
</script>


<style>
    #panel{
        /* padding-top: 0.8em; */
        width: 35em;
        display: flex;
        justify-content: space-around;
    }
    #panel button{
        margin: 0.2em 1.4em;
        font-size: 1.0em;
     /*   background-color: #535353; */
    }
    .cmd_styl{
       /* list-style: none; */
        margin-left: 1em;
        text-align: left;
        font-style: italic;
        font-size: 0.85em;

    }
    #gaigai{
        max-height: 7em;
        overflow-y: scroll;
    }
/*    #gaigai li{
        border-bottom: 1px dashed #f35725;
    } */
    .abs-pos{
        position: absolute;
        top: 4.8em;
        left: -6.5em;
    }
@media (prefers-color-scheme: light) {
    #panel{
        --btn-color: rgb(233,56,37);
    }

}
</style>
